import React, { useState, useEffect } from "react";
import { Form, Input, Select, Button, Table, } from "antd";
import api from '../../../api'

const Order = () => {
    let [data, setData] = useState()
    // dom渲染后 componentDidMount

    useEffect(() => {
        getData()
    }, [])

    const getData = async () => {
        const { data: res } = await api.getOrderTable()
        console.log(res);
        res.data = res.data.filter(item => {
            return item.key = item.OrderID
        })
        setData([...res.data])
    }

    const { form } = Form.useForm(),
        { Option } = Select,
        columns = [{
            title: "序号",
            dataIndex: "OrderID",
            key: "OrderID",
            align: 'center'
        },
        {
            title: "编号",
            dataIndex: "OrderNumber",
            key: "OrderNumber",
            align: 'center'
        },
        {
            title: "用户名",
            dataIndex: "OrderName",
            key: "OrderName",
            align: 'center'
        },
        {
            title: "手机号",
            key: "OrderPhone",
            dataIndex: "OrderPhone",
            align: 'center'
        },
        {
            title: "类型",
            dataIndex: "OrderType",
            key: "OrderType",
            align: 'center'
        },
        {
            title: "支付金额",
            dataIndex: "OrderPrice",
            key: "OrderPrice",
            align: 'center'
        },

        {
            title: "支付时间",
            dataIndex: "OrderTime",
            key: "OrderTime",
            align: 'center'
        },
        {
            title: "操作",
            key: "action",
            align: 'center',
            render: (text, record) => (
                <Button type='text'>删除</Button>
            ),
        },]

    const onGenderChange = () => { };


    return (
        <div>
            <p className="header_title">订单管理</p>
            <div className="order_main">
                <Form layout="inline" form={form}>

                    <Form.Item label="订单类型：">
                        <Select placeholder="请选择" onChange={onGenderChange} allowClear>
                            <Option value="male">请选择</Option>
                            <Option value="female">二手房出租</Option>
                            <Option value="other">有房出租</Option>
                            <Option value="female">我想买个房</Option>
                            <Option value="other">我想租个房</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="搜索：">
                        <Input placeholder="请输入手机号/用户名/订单号" />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary'>查询</Button>
                    </Form.Item>
                </Form>
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    );
};

export default Order;
